<template>
  <div class="flex-center">
    <ViewListIcon
      @click="handleClick"
      size="20"
      style="color: #fff"
    />
    <ClientOnly>
      <t-drawer
        :footer="false"
        v-model:visible="visible"
        :style="{ height: `${height}px` }"
      >
        <div
          class="w-full h-full text-white cursor-default flex flex-col p-[20px] gap-[10px]"
          :style="{ background: 'var(--xm-background)' }"
        >
          <div class="flex items-center justify-between">
            <XMImg
              :src="logo"
              isAutoImg
              class="w-auto h-[30px]"
            />
            <CloseIcon
              size="20"
              @click="visible = false"
              class="cursor-pointer"
            />
          </div>
          <div class="flex-1 overflow-auto flex flex-col gap-[10px]">
            <a
              :href="getTargetUrl(`/categoryDetail?categoryType=${item.categoryType}`)"
              v-for="(item, index) in data"
              :key="index"
              :class="[
                'p-[10px] rounded-xl hover:bg-[#ffffff50] flex items-center gap-[10px]',
                item.categoryType === categoryType ? 'bg-[#ffffff50]' : '',
              ]"
              @click="handleClickTrack({ category: item.categoryName })"
            >
              <XMImg
                :src="item.categoryIcon"
                isAutoImg
                class="w-auto h-[20px] rounded-[6px]"
              />
              <div>
                {{ item.categoryName }}
              </div>
            </a>
          </div>
        </div>
      </t-drawer>
    </ClientOnly>
  </div>
</template>

<script lang="ts" setup>
import { ViewListIcon, CloseIcon } from "tdesign-icons-vue-next";
import { useConfigStore } from "~/composables/useConfigStore";
import type { ClickTrackType } from "../XMCategory/type";
import { useGA } from "~/composables/useGA";
import { useInnerSize } from "~/composables/useInnerSize";

const visible = ref<boolean>(false);
const { config, hostName } = useConfigStore();
const { logo } = config.value;
const { categoryType } = useRoute().query;
const { trackEvent } = useGA();
const { height } = useInnerSize();
const { data } = await useFetch<ConfigJsonType>("/api/getCateroty", {
  method: "POST",
  body: { hostName, count: 15 },
});

/** 点击顶部分类按钮 */
const handleClick = () => {
  visible.value = true;
  trackEvent({
    eventName: "Click_Sidebar",
  });
};

/**
 * 点击分类类型上报事件
 * @param clickTrackType
 */
const handleClickTrack = (clickTrackType: ClickTrackType) => {
  const { category } = clickTrackType;
  trackEvent({
    eventName: "Click_Category",
    params: {
      Category: category,
      Subzone: "sidebar",
    },
  });
};
</script>

<style scoped></style>
